<template>
  <div>
    <div>
      <el-descriptions border style="margin: 10px 0">
        <el-descriptions-item>
          <template slot="label">
            后台账号
          </template>
          <el-input v-model="account"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            后台密码
          </template>
          <el-input v-model="password" type="password" show-password></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <el-card>
        <div slot="header">
          <span>搜索操作相关设置</span>
        </div>
        <div>
          <el-row :gutter="30" style="margin-bottom: 30px">
            <el-col :span=7>
              <el-input v-model="searchContent" placeholder="搜索目标品类 例: 炒锅">
              </el-input>
            </el-col>
            <el-col :span=17>
              <span class="label">
                目标词类 :
              </span>
              <el-radio-group v-model="dataWord">
                <el-radio-button v-for="item  in options.dataWord" :label=item></el-radio-button>
              </el-radio-group>
            </el-col>
          </el-row>
          <span style="color: #ff7675;font-weight:bold;margin-bottom: 20px;display: block;text-align: center">
            注意 : 若账号只支持选择7天数据则强制选择7天
          </span>
          <el-row :gutter="20">
            <el-col :span=12>
              <span class="label">
                全流程使用的数据周期 :
              </span>
              <el-radio-group v-model="dateCycle">
                <el-radio-button :label=7>7天</el-radio-button>
                <el-radio-button :label=30>30天</el-radio-button>
              </el-radio-group>
            </el-col>
            <el-col :span=12>
              <span class="label">
                结果表格是否追加竞品词数据:
              </span>
              <el-switch
                  v-model="isAppendCompeting"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card style="margin-top: 10px">
        <div slot="header">
          <span>Excel 数据相关设置</span>
        </div>
        <el-descriptions title="忽略数据条件" :column="2" border>
          <el-descriptions-item :labelStyle="labelStyle" label="交易金额小于">
            <el-input-number v-model="dealValue" :min="1"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="labelStyle" label="支付人数小于">
            <el-input-number v-model="payNum" :min="1"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="labelStyle" label="客单价小于">
            <el-input-number v-model="price" :min="1"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="labelStyle" label="包含字母的忽略">
            <el-switch
                v-model="rmEnglish"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value=true
                :inactive-value=false>
            </el-switch>
          </el-descriptions-item>
          <el-descriptions-item v-if="isAppendCompeting" :labelStyle="labelStyle" label="竞品词-访客量小于">
            <el-input-number v-model="competingMinVisits" :min="0"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item v-if="isAppendCompeting" :labelStyle="labelStyle" label="竞品词-ROI小于">
            <el-input-number v-model="competingMinRoi" :min="0"></el-input-number>
          </el-descriptions-item>
        </el-descriptions>

        <div style="margin: 20px 0">
          <div
              style="display: flex;align-items: center;"
          >
            <el-input style="width: 90%"
                      v-model="ignoreKey"
                      placeholder="包含此字符的关键词将被忽略 例 : 输入(平底) 忽略(平底锅)"
                      clearable>
            </el-input>
            <el-button
                style="display: inline-block;float: right;margin-left: 20px"
                type="text"
                @click="addIgnoreKey()"
            >
              <span style="font-size: 15.5px;font-weight: bold">添加</span>
            </el-button>
          </div>
          <div style="margin-top: 10px">
            <el-tag
                style="margin: 0 5px 5px 0"
                :key="tag"
                v-for="(tag,index) in blockWords"
                closable
                :disable-transitions="false"
                @close="removeArrayByIndex(blockWords,index)">
              {{tag}}
            </el-tag>
          </div>
        </div>

        <div style="margin: 20px 0">
          <div
              style="display: flex;align-items: center;"
          >
            <el-input style="width: 90%"
                      v-model="containKey"
                      placeholder="数据围绕关键词核心 例如 : 麦饭石"
                      clearable>
            </el-input>
            <el-button
                style="display: inline-block;float: right;margin-left: 20px"
                type="text"
                @click="addContainKey()"
            >
              <span style="font-size: 15.5px;font-weight: bold">添加</span>
            </el-button>
          </div>
          <div style="margin-top: 10px">
            <el-tag
                style="margin: 0 5px 5px 0"
                :key="tag"
                v-for="(tag,index) in tableTopic"
                closable
                :disable-transitions="false"
                @close="removeArrayByIndex(tableTopic,index)">
              {{tag}}
            </el-tag>
          </div>
        </div>

        <el-descriptions title="数据上色条件" :column="2" border>
          <el-descriptions-item :labelStyle="labelStyle" label="交易金额大于">
            <el-input-number v-model="dealNum" :min="1"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="labelStyle" label="搜索人数/在线商品数大于">
            <el-input-number v-model="hotIndex" :min="1"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="labelStyle" label="搜索人数大于">
            <el-input-number v-model="searchNum" :min="1"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="labelStyle" label="支付转化率大于(百分比)">
            <el-input-number v-model="payRate" :min="1"></el-input-number>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="labelStyle" label="支付人数大于">
            <el-input-number v-model="numOfPay" :min="1"></el-input-number>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card style="margin-top: 10px">
        <div slot="header">
          <span>修改商品相关设置</span>
          <div style="width: 300px;float: right;">
            <el-button style="display: inline-block;float: right;padding: 3px 0" type="text"
                       @click="AddTargetProductMap">
              <span style="font-size: 15px;font-weight: bold">添加目标商品</span>
            </el-button>
          </div>
        </div>
        <div>
          <el-row :gutter="20" style="margin-bottom: 20px">
            <el-col :span=12>
              <span class="label">
                优化标题 :
              </span>
              <el-switch
                  v-model="isOperationTitle"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </el-col>
            <el-col :span=12>
              <span class="label">
                追加关键词 :
              </span>
              <el-switch
                  v-model="isAutoAppendKeyWord"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </el-col>
          </el-row>
          <div v-if="isAutoAppendKeyWord" style="margin: 15px 0">
            <div style="margin-bottom: 10px">
              <span class="label">
                新关键词匹配类型 :
              </span>
              <el-radio-group v-model="matchesType" size="medium">
                <el-radio-button label="广泛匹配">广泛</el-radio-button>
                <el-radio-button label="精准匹配">精准</el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="20">
              <el-col :span=12>
              <span class="label">
                按市场出价百分比 :
              </span>
                <el-input-number v-model="percent" :step="1" size="mini"></el-input-number>
              </el-col>

              <el-col :span=12>
              <span class="label">
                最高出价 :
              </span>
                <el-input-number v-model="priceCap" :step="0.01" size="mini" :precision="2"></el-input-number>
              </el-col>

            </el-row>
          </div>

          <span style="color: #ff7675;font-weight:bold;display: block;text-align: center;letter-spacing: 1px">
            注意 : 以下的 "商品编号" 必须是精确的
          </span>
          <div style="margin: 10px 0">
            <div v-for="(item,index) in targetProductMap">
              <el-descriptions border :column=2>
                <template slot="extra">
                  <div>
                    <el-popconfirm
                        title="确定删除此目标商品吗？"
                        @confirm="removeArrayByIndex(targetProductMap,index)"
                    >
                      <el-button slot="reference" type="danger" size="small">删除</el-button>
                    </el-popconfirm>
                  </div>
                </template>
                <el-descriptions-item :labelStyle="labelStyle" label="商品编号">
                  <el-input
                      v-model="targetProductMap[index]['productId']"
                      placeholder="例如: 679312785018">
                  </el-input>
                </el-descriptions-item>
                <el-descriptions-item :labelStyle="labelStyle" label="标题固定前缀">
                  <el-input
                      v-model="targetProductMap[index]['titlePrefix']"
                      placeholder="例如: 赫巴兹361不锈钢">
                  </el-input>
                </el-descriptions-item>
                <el-descriptions-item :labelStyle="labelStyle" label="标题固定后缀">
                  <el-input
                      v-model="targetProductMap[index]['titleSuffix']"
                      placeholder="例如: 煎炒煮一体">
                  </el-input>
                </el-descriptions-item>
                <el-descriptions-item :labelStyle="labelStyle" label="标题最大长度">
                  <el-input-number v-model="targetProductMap[index]['titleMaxLength']" :min="30"></el-input-number>
                </el-descriptions-item>
                <el-descriptions-item v-if="isAppendCompeting" :labelStyle="labelStyle" label="一号竞品编号">
                  <el-input v-model="targetProductMap[index]['competing1']"></el-input>
                </el-descriptions-item>
                <el-descriptions-item v-if="isAppendCompeting" :labelStyle="labelStyle" label="二号竞品编号">
                  <el-input v-model="targetProductMap[index]['competing2']"></el-input>
                </el-descriptions-item>
              </el-descriptions>
              <div>
                <div style="margin-top: 10px">
                  <el-tag
                      style="margin: 0 5px 5px 0"
                      :key="tag"
                      v-for="(tag,sIndex) in targetProductMap[index]['ignoreCuts']"
                      closable
                      :disable-transitions="false"
                      @close="targetProductMap[index]['ignoreCuts'].splice(sIndex, 1)">
                    {{tag}}
                  </el-tag>
                </div>
                <div style="margin-top: 10px">
                  <el-button
                      type="success"
                      size="small"
                      @click="openIgnoreCutInput(targetProductMap[index])"
                  >
                    添加不能存在该商品标题中的字符
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {isNull} from "@/utils/service";
import msg from "@/utils/message";

export default {
  name: "industryGoodKey",
  props: {
    params: {
      type: Object,
      required: false
    }
  },
  watch: {
    'params': {
      handler(val) {
        this.initParams({...this.params})
      }
    }
  },
  created() {
    this.initParams({...this.params})
  },
  data() {
    return {
      options: {
        dataWord: ['搜索词', '长尾词', '品牌词', '核心词', '修饰词']
      },
      ignoreKey: '',
      containKey: '',
      account: '',
      password: '',
      /*搜索品类 例: 炒锅*/
      searchContent: '',
      /*是否操作标题*/
      isOperationTitle: false,
      /*是否自动添加关键词*/
      isAutoAppendKeyWord: false,
      /*搜索排行词类选择*/
      dataWord: '搜索词',
      /* 全过程使用的数据周期 */
      dateCycle: 7,
      /* 交易金额最小值 */
      dealValue: 1000,
      /* 支付人数最小值 */
      payNum: 30,
      /* 客单价最小值 */
      price: 128,
      /* 忽略关键词包含此列表中字符串的关键词 */
      blockWords: [],
      /* 关键词中必须包含的字符列表 */
      tableTopic: [],
      /* 交易金额 大于此数的标红 */
      dealNum: 10000,
      /* 搜索人数/在线商品数 大于此数标红 */
      hotIndex: 1,
      /*搜索人数 大于此数的标红*/
      searchNum: 10000,
      /*支付转化率 大于此数的标红*/
      payRate: 10,
      /*支付人数 大于此数的标红*/
      numOfPay: 500,
      /*是否忽略包含英文字符的关键词*/
      rmEnglish: false,
      /*市场价按此百分比出家*/
      percent: 100,
      /*出价封顶*/
      priceCap: 1.00,
      /*是否追加竞品关键词数据*/
      isAppendCompeting: false,
      /* 竞品词的访问数量小于此数忽略 */
      competingMinVisits: 0,
      /* 竞品词的支付转化率小于此值忽略 */
      competingMinRoi: 0,
      /**
       * 操作目标商品映射
       * {
       * productId(编号ID),
       * competing1(竞品1号id),
       * competing2(竞品2号id)
       * titlePrefix(标题前缀),
       * titleSuffix(标题后缀),
       * titleMaxLength(标题最大长度),
       * ignoreCuts(标题中需要忽略的词[列表])
       * }
       * */
      targetProductMap: [],
      matchesType: '精准匹配',
      labelStyle: {
        color: "#2f3542",
        fontWeight: 'bold'
      }
    }
  },
  methods: {
    initParams({
                 account = '', password = '', searchContent = '',
                 isOperationTitle = false, isAutoAppendKeyWord = false,
                 dataWord = '搜索词', dealValue = 1000, payNum = 30,
                 blockWords = [], tableTopic = [], dateCycle = 7,
                 price = 128, dealNum = 10000, hotIndex = 1,
                 searchNum = 10000, payRate = 10, numOfPay = 500,
                 matchesType = "精准匹配", targetProductMap = [], rmEnglish = false,
                 percent = 100, priceCap = 1.00,isAppendCompeting = false,
                 competingMinVisits = 0, competingMinRoi = 0
               } = {}) {
      this.account = account
      this.password = password
      this.searchContent = searchContent
      this.isOperationTitle = isOperationTitle
      this.isAutoAppendKeyWord = isAutoAppendKeyWord
      this.dataWord = dataWord
      this.tableTopic = tableTopic
      this.dealValue = dealValue
      this.payNum = payNum
      this.price = price
      this.blockWords = blockWords
      this.dealNum = dealNum
      this.hotIndex = hotIndex
      this.searchNum = searchNum
      this.payRate = payRate
      this.numOfPay = numOfPay
      this.matchesType = matchesType
      this.targetProductMap = targetProductMap
      this.rmEnglish = rmEnglish
      this.percent = percent
      this.priceCap = priceCap
      this.dateCycle = dateCycle
      this.isAppendCompeting = isAppendCompeting
      this.competingMinVisits = competingMinVisits
      this.competingMinRoi = competingMinRoi
      this.initTargetProductMap()
    },
    getParam() {
      let _t = this;
      let data = {
        account: _t.account,
        password: _t.password,
        searchContent: _t.searchContent,
        isOperationTitle: _t.isOperationTitle,
        isAutoAppendKeyWord: _t.isAutoAppendKeyWord,
        dataWord: _t.dataWord,
        tableTopic: _t.tableTopic,
        dealValue: _t.dealValue,
        payNum: _t.payNum,
        price: _t.price,
        blockWords: _t.blockWords,
        dealNum: _t.dealNum,
        hotIndex: _t.hotIndex,
        searchNum: _t.searchNum,
        payRate: _t.payRate,
        numOfPay: _t.numOfPay,
        matchesType: _t.matchesType,
        targetProductMap: _t.targetProductMap,
        rmEnglish: _t.rmEnglish,
        percent: _t.percent,
        priceCap: _t.priceCap,
        dateCycle: _t.dateCycle,
        isAppendCompeting: _t.isAppendCompeting,
        competingMinVisits: _t.competingMinVisits,
        competingMinRoi: _t.competingMinRoi,
      }
      return {...data}
    },
    checkParam() {
      let _t = this;
      let err = "[ 生意参谋-关键词-行业词 ]"
      if (isNull(_t.account)) {
        msg.warning(err + " 请填写后台账号")
        return false;
      }
      if (isNull(_t.password)) {
        msg.warning(err + " 请填写后台密码")
        return false;
      }
      if (isNull(_t.searchContent)) {
        msg.warning(err + " 请填写搜索目标品类")
        return false;
      }
      if (_t.isOperationTitle || _t.isAutoAppendKeyWord) {
        if (isNull(_t.targetProductMap)) {
          msg.warning(err + " 请添加修改商品目标")
          return false;
        }
        for (let i = 0; i < _t.targetProductMap.length; i++) {
          if (isNull(_t.targetProductMap[i].productId)) {
            msg.warning(err + " 请添加修改商品相关设置 第 " + (i + 1) + " 项的商品编号")
            return false;
          }
          if (_t.isAppendCompeting){
            if (isNull(_t.targetProductMap[i].competing1) || isNull(_t.targetProductMap[i].competing2)){
              msg.warning(err + " 请填写修改商品相关设置 第 " + (i + 1) + " 项的竞品编号")
              return false;
            }
          }
        }
      }
      return true
    },
    addIgnoreKey() {
      let ignoreKey = this.ignoreKey.trim();
      if (!isNull(ignoreKey)) {
        this.blockWords = [
          ...new Set(this.blockWords.concat(ignoreKey.split(/[,，]/)
              .filter(item => item.trim() !== '')))
        ]
        this.ignoreKey = "";
      }
    },
    addContainKey() {
      let containKey = this.containKey.trim();
      if (!isNull(containKey)) {
        this.tableTopic = [
          ...new Set(this.tableTopic.concat(containKey.split(/[,，]/)
              .filter(item => item.trim() !== '')))
        ]
        this.containKey = "";
      }
    },
    /** 对目标商品数组进行一些空值初始化*/
    initTargetProductMap() {
      this.targetProductMap = this.targetProductMap.map(value => {
        if (isNull(value.competing1)) {
          value.competing1 = ''
        }
        if (isNull(value.competing2)) {
          value.competing2 = ''
        }
        return value
      })
    },
    AddTargetProductMap() {
      this.targetProductMap.unshift({
        productId: '',
        competing1: '',
        competing2: '',
        titlePrefix: '',
        titleSuffix: '',
        titleMaxLength: 60,
        ignoreCuts: [],
      })
    },
    removeArrayByIndex(arr, index) {
      arr.splice(index, 1);
    },
    openIgnoreCutInput(targetObj) {
      this.$prompt(
          '输入不能存在该商品标题中的字符(例如 : "锅,无,用")',
          '输入标题忽略字符', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false
          }).then(({value}) => {
        if (!isNull(value)) {
          targetObj['ignoreCuts'] = [
            ...new Set(targetObj['ignoreCuts'].concat(value.split(/[,，]/)
                .map(item => item.trim())
                .filter(item => item !== '')))
          ]
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.label {
  font-size: 15px;
  font-weight: bold;
  color: #2f3542
}
</style>